<!-- 普通消息发布页 -->
<!-- 小吉子 更新于2020.08.23 -->

<!-- 小吉子 更新于2020.08.23 -->
<!-- 新增图片的添加 删除预览事件 -->

<!-- 小吉子 更新于2020.08.24 -->
<!-- 修复：从圈子页面进入时圈子相关内容不需显示 -->
<!-- 更新：标签弹窗的逻辑处理 -->

<!-- 小吉子 更新于2020.08.27 -->
<!-- 更新：1.成员 圈子 弹窗的逻辑处理
					2.发布的弹窗 -->
					
<!-- 小吉子 更新于2020.08.28 -->
<!-- 更新：1.上传图片文件 -->
					
<!-- 小吉子 更新于2020.08.29 -->
<!-- 更新：普通帖子发布接口 圈子内发布接口 -->

<!-- 小吉子 更新于2020.08.31 -->
<!-- 修复：检查空值的 bug -->
<!-- 更新：图片缩放尺寸 -->

<!-- 小吉子 更新于2020.09.01 -->
<!-- 更新：系统返回键监听
		 调整：确认弹窗 取消弹窗 历史记录弹窗 样式-->
		 
<!-- 小吉子 修改于2020.09.02 -->
<!-- 修改：1.弹窗
					2.@ 的选中状态 bug -->
<!-- 修改：编辑历史编辑的标签bug -->

<!-- 小吉子 更新于2020.09.05 -->
<!-- 修改：1.发布失败依然有图标的 bug
					2.用户关注 用户粉丝 的动态加载
					3.微调样式 -->

<!-- 小吉子 更新于2020.09.06 -->
<!-- 修改；1.微调样式 -->

<!-- 小吉子 更新于2020.09.07 -->
<!-- 修改：1.监听系统返回键收回弹窗
					2.无法获取用户关注粉丝圈子 bug 
					3.返回上页 bug -->

<!-- 小吉子 更新于2020.09.09 -->
<!-- 修改：回车可发布帖子的 bug -->

<!-- 小吉子 更新于2020.09.10 -->
<!-- 修改：不保存页面退出 -->
<!-- 修改：返回 bug -->

<!-- 小吉子 更新于2020.09.14 -->
<!-- 修改：弹窗不关闭 -->

<!-- 小吉子 修改于2020.09.20 -->
<!-- 修改：1.圈子列表滚动
					2.删除多余代码 -->
<template>
	<view class="posting_edit">
		<!-- 普通消息发布页 -->
		<!-- 系统框 -->
		<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
		<view class="status_bar"></view>
		<!-- 自定义导航栏 -->
		<view class="nav_bar">
			<view class="aside" @tap="back">
				<text class="cancel">取消</text>
			</view>
			<view class="message"></view>
			<view class="aside" @tap="issueButton">
				<text class="issue">发布</text>
			</view>
		</view>
		<!-- 文本框 -->
		<view class="textarea_box">
			<textarea placeholder="请输入200字以内信息" maxlength="200" v-model="textarea"></textarea>	
			<text class="length">{{textarea.length}}/200</text>
			<text v-show="people.length" class="atPeople">@：<text class="atPeopleNaem">{{peopleName}}</text></text>
		</view>
		<!-- 图片框 -->
		<view class="picture_box">
			<view class="picture" v-for="(item, index) in pictureList" :key="index" v-if="pictureList.length">
				<image :src="item" mode="aspectFill" :data-index="index" @tap="preview"></image>
				<text class="inxupt inxupttubiao23 delete" :data-index="index" @tap="deletePicture"></text>
			</view>
			<view class="add_picture inxupt inxupttubiao29" v-if="pictureListTem.length<9" @tap="addPicture"></view>
		</view>
		<!-- 标签 圈子 框 -->
		<view class="primary_box" v-if="!inCommunity">
			<view class="primary" @tap="choicePrimary">
				<text>主标签<text v-if="!inCommunity">（必填）：</text><text v-else>（选填）：</text></text><text class="content" v-if="primeName">{{primeName}}</text><text class="content" v-else>#寻物/招领</text>
			</view>
			<view class="primary" @tap="choicePrimary">
				<text>自建标签<text>（选填）：</text></text><text class="content" v-if="write">{{write}}</text><text class="content" v-else>#自建标签</text>
			</view>
			<view class="primary" @tap="atCommunity">
				<text>同步圈子：</text><text class="content" v-if="communityName">{{communityName}}</text><text class="content" v-else>同步圈子</text>
			</view>
		</view>
		<!-- 底栏 -->
		<view class="bottom_box" v-if="!inCommunity">
			<!-- @ 别人 -->
			<text class="inxupt" @tap="atPeople">@</text>
			<!-- # 标签 -->
			<text class="inxupt" @tap="choicePrimary" v-if="!inCommunity">#</text>
			<!-- 圈子 -->
			<text class="inxupt inxupttubiao15" @tap="atCommunity" v-if="!inCommunity"></text>
		</view>
		
		<!-- 标签弹窗 -->
		<wybPopup ref="primary" type="bottom" :height="screenHeight*0.75*750/screenWidth" width="750" radius="6" :showCloseIcon="true" :maskClickClose="false" @hide="submitPrime">
			<view class="popup-content primary_popup">
				<view class="prime_box">
					<view class="title">主标签</view>
					<view class="prime">
						<text v-for="(item, index) in primaryLabel"
									:key="index" class="label" @tap="ChoicePrime"
									:data-text="item.tag" :data-index="index+1"
									:class="{ selected: item.isChoice }"
									>{{item.tag}}</text>
					</view>
				</view>
				<view class="write_box">
					<view class="title">自建标签<text>选填</text></view>
					<view class="input_box">
						<input type="text" v-model="choiceList.write" placeholder="请输入5字以内标签" maxlength="5" />
					</view>
				</view>
				<view class="submit_box">
					<text @tap="submitPrime" class="button">确认</text>
				</view>
			</view>
		</wybPopup>
		<!-- 圈子弹窗 -->
		<wybPopup ref="community" type="bottom" :height="screenHeight*0.75*750/screenWidth" width="750" radius="6" :showCloseIcon="true" mode="size-fixed" :maskClickClose="false" @hide="closeCommunity" :scrollY="true">
			<view class="popup-content community_popup">
				<view class="input_box">
					<input type="text" placeholder="请输入或选择想同步的圈子" v-model="searchCommunityText" class="text" />
				</view>
				<view class="scroll_box">
					<swiper :current="isActive" @change="swiperChange" :style="'height:100%;transition: height 0.25s;'">
						<swiper-item>
							<scroll-view :scroll-y="true" :show-scrollbar="true">
								<view class="item" v-for="(item, index) in userCommunity" :key="index" :data-id="item.id" :data-name="item.name" :data-index="index" @tap="choiceCommunity" :class="{active: item.selected}" v-if="item.name.indexOf(searchCommunityText)!=-1">
									<image :src="item.avatarUrl" mode="aspectFill" class="photo"></image><text class="name">{{item.name}}</text>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>	
				</view>
			</view>
		</wybPopup>
		<!-- @ 弹窗 -->
		<wybPopup ref="people" type="bottom" :height="screenHeight*0.75*750/screenWidth" width="750" radius="6" :showCloseIcon="true" mode="size-fixed" :maskClickClose="false" @hide="closePeople">
			<view class="popup-content people_popup">
				<view class="input_box">
					<input class="text" placeholder="请输入或选择想 @ 的用户" v-model="searchPeopleText"></input>
				</view>
				<view class="title">
					<view class="title_item" @tap="getActive" :class="isActive == '0' ? 'active' : ''" :data-index="0">
						<text class="text">我的关注 </text>
					</view>
					<view class="title_item" @tap="getActive" :class="isActive == '1' ? 'active' : ''" :data-index="1">
						<text class="text">我的粉丝 </text>
					</view>
				</view>
				<view class="swiper_box">
					<swiper :current="isActive" @change="swiperChange" :style="'height:100%;transition: height 0.25s;'">
						<swiper-item>
							<scroll-view :scroll-y="true" :show-scrollbar="true" @scrolltolower="moreStar">
								<view class="item" v-for="(item, index) in userStar" :key="index" :data-id="item.id" :data-name="item.nickName" :data-index="index" :data-tag="'star'" @tap="choicePeople" :class="{active: item.selected}" v-show="item.nickName.indexOf(searchPeopleText)!=-1">
									<image :src="item.avatarUrl" mode="aspectFill" class="photo"></image><text class="name">{{item.nickName}}</text>
								</view>
								<UniLoadMore :status="starStatus" :contentText="contentText"></UniLoadMore>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view :scroll-y="true" :show-scrollbar="true" @scrolltolower="moreFans">
								<view class="item" v-for="(item, index) in userFans" :key="index" :data-id="item.id" :data-name="item.nickName" :data-index="index" :data-tag="'fans'" @tap="choicePeople" :class="{active: item.selected}" v-show="item.nickName.indexOf(searchPeopleText)!=-1">
									<image :src="item.avatarUrl" mode="aspectFill" class="photo"></image><text class="name">{{item.nickName}}</text>
								</view>
								<UniLoadMore :status="fansStatus" :contentText="contentText"></UniLoadMore>
							</scroll-view>
						</swiper-item>
					</swiper>	
				</view>
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import wybPopup from '../../components/plugins/wyb-popup/wyb-popup.vue'
	import {_ajax} from '../../in-xupt-functions.js'
	import BaseUrl from '../../config.js'
	import UniLoadMore from '../../components/plugins/uni-load-more.vue'
	let primaryPopup = false
	let peoplePopup = false
	let communityPopup = false
	export default {
		data() {
			return {
				userId: 0,
				token: '',
				communityId: 0,
				inCommunity: false, // 是否是在某一个圈子内新建帖子
				primaryLabel: [{tag:'#学习', isChoice:false}, {tag:'#生活', isChoice:false}, {tag:'#失物招领', isChoice:false}, {tag:'#分享感悟', isChoice:false}, {tag:'#表白', isChoice:false}, {tag:'#找人', isChoice:false}, {tag:'#寻物启事', isChoice:false}, {tag:'#求购', isChoice:false}, {tag:'#出售', isChoice:false}, {tag:'#拼团', isChoice:false}, {tag:'#考研', isChoice:false}, {tag:'#活动宣传', isChoice:false}, {tag:'#纳新', isChoice:false}, {tag:'#找队友', isChoice:false}, {tag:'#编程', isChoice:false}, {tag:'#二次元', isChoice:false}, {tag:'#美食', isChoice:false}, {tag:'#美妆', isChoice:false}, {tag:'#新闻', isChoice:false}, {tag:'#周边', isChoice:false}, {tag:'#其他', isChoice:false}],
				textarea: '',
				userStar: [],
				userFans: [],
				starIds: [], // 关注id列表 (用来判断粉丝和关注是否为同一人，是的话同时改变选中状态)
				fansIds: [], // 粉丝id列表
				userCommunity: [],
				pictureListTem: [], // 选择的图片路径列表（临时）
				pictureList: [], // 选择的图片路径列表
				prime: [], // 用户选择的主标签
				write: '', // 用户输入的自建标签
				community: [], // 同步圈子ID
				communityName: '',
				communityList: {id: [], name: [], index: []}, // 正在选择的圈子
				primeName: '',
				peopleList: {id: [], name: [], index: []}, // 正在@的人
				people: [],
				peopleName: '',
				searchPeopleText: '',
				searchCommunityText: '',
				choiceList: { // 确认更改前选择的标签
					prime: {id:[], primary:[]}, 
					primeName: '',
					write: ''
				},
				isActive: 0,
				height: 0,
				history: {}, // 保存的历史记录 
				compileHistory: false, // 是否正在编辑历史保存
				screenHeight: 0,
				screenWidth: 0,
				// 加载更多
				starNowPage: 1,
				starStatus: 'more',
				starIsLastPage: false,
				fansNowPage: 1,
				fansStatus: 'more',
				fansIsLastPage: false,
				contentText: {
					contentdown: "上拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				pageSize: 1000,
			}
		},
		onLoad(option) {
			// 获取用户id
			let number = 0
			let _self = this
			uni.getStorage({
				key: 'userId',
				success(res) {
					_self.userId = res.data
					console.log(res.data)
					_self.moreFans()
					_self.moreStar()
					_ajax({ // 用户圈子列表
						url: '/user/'+_self.userId+'/circles',
						method: 'get'
					}).then((res) => {
						console.log(res.data)
						if(res.data.status == 0) {
							_self.userCommunity = res.data.data
						}
					})
				}
			})
			// token
			uni.getStorage({
				key: 'token',
				success(res) {
					_self.token = res.data
				}
			})
			if(option.communityId) {
				_self.communityId = option.communityId
				_self.inCommunity = true
			} else {
				_self.inCommunity = false
			}
			uni.getSystemInfo({
				success: function(res) {
					_self.screenHeight = res.screenHeight
					_self.screenWidth = res.screenWidth
				}
			})
			
		},
		onReady() {
			let _self = this
			console.log(uni.getStorageInfoSync())
			let storageKeys = uni.getStorageInfoSync().keys
			if(_self.inCommunity) {
				if(storageKeys.includes("historyTopicInCommunity")) {
					_self.history = uni.getStorageSync("historyTopicInCommunity")
					uni.showModal({
						content: '检测到你有未完成的编辑记录,要继续编辑嘛？',
						confirmText: '继续编辑',
						cancelText: '不了，谢谢',
						success(res) {
							if(res.confirm) {
								_self.continueHistory()
							}
						}
					})
				}
			} else {
				if(storageKeys.includes("historyTopic")) {
					_self.history = uni.getStorageSync("historyTopic")
					uni.showModal({
						content: '检测到你有未完成的编辑记录,要继续编辑嘛？',
						confirmText: '继续编辑',
						cancelText: '不了，谢谢',
						success(res) {
							if(res.confirm) {
								_self.continueHistory()
							}
						}
					})
				}	
			}
		},
		components:{
			wybPopup,
			UniLoadMore
		},
		methods: {
			// ---------------- 顶栏事件 ----------------- //
			// 发布帖子按钮
			issueButton: async function() {
				// 判断必填值是否为空
				let textIsEmpty = /^\s*$/.test(this.textarea)
				if((textIsEmpty || this.textarea=='') && !this.pictureList.length) {
					uni.showToast({
						icon: 'none',
						title: '不能发布空白文本哦！'
					})
					return 0
				}
				if(!this.inCommunity && this.prime.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择至少一个主标签'
					})
					return 0
				}
				let _self = this
				if(this.inCommunity) {
					uni.showModal({
						title: '发布',
						content: '圈子内发帖，帖子只会发布在当前圈子',
						confirmText: '确认发布',
						cancelText: '我再想想',
						success(res) {
							if(res.confirm) {
								_self.issueTopic()
							}
						}
					})
				} else {
					await this.issueTopic()
				}
			},
			// 提交帖子
		 	issueTopic: async function() {
				let url = '/post'
				let data = {}
				// 判断必填值是否为空 已移动到上方判断
				if(!this.inCommunity) { // 发送的数据
					data.atIds = this.people
					data.body = this.textarea
					data.circleIds = this.community
					data.customTags = []
					if(this.write) {
						data.customTags.push(this.write)
					}
					data.mainTagIds = this.prime
					data.mediaUrls = []	
				} else {
					url = '/circle/'+this.communityId+'/post'
					data.body = this.textarea
					data.mediaUrls = []	
				}
				uni.showLoading({
					mask: true,
					title: '正在发布'
				})
				// 上传图片
				if(this.pictureList.length) {
					let _self = this
					// 单文件上传
					for(let i = 0; i < this.pictureList.length; i ++) {
						await _self.upLoadImage(this.pictureList[i], i).then(res => {
							data.mediaUrls.push(JSON.parse(res).data)
						})
					}
				}
				let _self = this
				console.log(data)
				_ajax({
					url: url,
					method: 'post',
					data: data
				}).then((res) => {
					console.log(res.data)
					if(res.data.status == 0) {
						uni.isRefresh = true
						if(_self.compileHistory) {
							// 移除本地历史记录
							if(_self.inCommunity) {
								uni.removeStorageSync('historyTopicInCommunity')
							} else {
								uni.removeStorageSync('historyTopic')
							}
							_self.clearHistoryPicture()
						}
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '发布成功',
							duration: 1000,
							success: () => {
								_self.zq()
							}
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							duration: 1500
						})
					}
				})
			},
			// 点击取消按钮
			back() {
				let _self = this
				if(this.haveContent) {
					if(this.inCommunity) {
						uni.showModal({
							title: '保存',
							content: '保存时会覆盖其他圈子的编辑记录，是否保存？',
							confirmText: '保存并退出',
							cancelText: '直接退出',
							success(res) {
								if(res.confirm) {
									_self.wq()
								} else {
									_self.zq()
								}
							}
						})	
					} else {
						uni.showModal({
							title: '保存',
							content: '是否保存？',
							confirmText: '保存并退出',
							cancelText: '直接退出',
							success(res) {
								if(res.confirm) {
									_self.wq()
								} else {
									_self.zq()
								}
							}
						})
					}
				} else {
					_self.zq()
				}
			},
			// 保存退出
			wq: async function() {
				let _self = this
				if(_self.compileHistory) {
					await _self.clearHistoryPicture()
				}
				let path = []
				if(_self.pictureList.length) {
					path = await _self.getImagePath()
					// console.log(path)
				}
				// 普通帖子保存
				if(!_self.inCommunity) {
					let historyTopic = {}
					historyTopic.textarea = _self.textarea
					historyTopic.prime = _self.prime
					historyTopic.primeName = _self.primeName
					historyTopic.write = _self.write
					historyTopic.pictureList = path
					uni.setStorage({
						key: 'historyTopic',
						data: historyTopic,
						success() {
							// console.log('baocun!!!')
							_self.zq()
						}
					})	
				} else {
					// 圈子内帖子保存
					let historyTopicInCommunity = {}
					historyTopicInCommunity.textarea = _self.textarea
					historyTopicInCommunity.pictureList = path
					uni.setStorage({
						key: 'historyTopicInCommunity',
						data: historyTopicInCommunity,
						success() {
							// console.log('baocun!!!')
							_self.zq()
						}
					})
				}
			},
			// 不保存退出 返回上页
			zq() {
				uni.navigateBack()
			},
			
			// ---------------- 图片选择 相关 ------------------ //
			// 删除图片
			deletePicture(e) {
				let index = e.currentTarget.dataset.index
				this.pictureListTem.splice(index, 1)
				this.pictureList.splice(index, 1)
			},
			// 增加图片
			addPicture() {
				let _self = this
				uni.chooseImage({
					success(res) {
						_self.pictureList = res.tempFilePaths
						_self.pictureListTem = res.tempFilePaths
					}
				})
			},
			// 保存图片到本地
			getImagePath: async function() {
				let _self = this
				let pathList = []
				let promises = []
				for(let i = 0; i < _self.pictureList.length; i ++) {
					promises[i] = new Promise((resolve, reject) => {
						uni.saveFile({
							tempFilePath: _self.pictureList[i],
							success(savedFilePath) {
								resolve(savedFilePath)
							}
						})
					})
				}
				await Promise.all(promises).then((res) => {
					res.forEach(item => {
						pathList.push(item.savedFilePath)
					})
				})
				return pathList
			},
			// 预览图片
			preview(e) {
				let _self = this
				uni.previewImage({
					urls: _self.pictureListTem,
					current: e.currentTarget.dataset.index
				})
			},
			// 上传图片
				// 单文件上传
			upLoadImage(url, index) {
				let _self = this
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: BaseUrl+'/upload',
						filePath: url,
						name: 'file',
						header: {
							'token': _self.token,
							'contentType': 'multipart/form-data'
						},
						success(res) {
							// console.log('上传！'+(index+1), res.data)
							resolve(res.data)
						},
						fail(res) {
							uni.showToast({
							  icon: 'none',
								title: res.data.msg, // 即显示后台返回的错误信息
							})
						}
					})
				}) 
			},
			// ---------------- 同步圈子 相关 ------------------ //
			// 同步圈子弹出框
			atCommunity() {
				this.$refs.community.show()
				communityPopup = true
			},
			closeCommunity() {
				communityPopup = false
			},
			// 新增 取消 圈子
			choiceCommunity(e) {
				let id = e.currentTarget.dataset.id
				let index = e.currentTarget.dataset.index
				let name = e.currentTarget.dataset.name
				if(this.community.includes(id)) {
					console.log(Array.isArray(this.community))
					let popIndex = this.community.indexOf(id)
					this.community.splice(popIndex, 1)
					this.communityList.id.splice(popIndex, 1)
					this.communityList.name.splice(popIndex, 1)
					this.communityList.index.splice(popIndex, 1)
					this.communityName = this.communityList.name.join(' ')
					this.userCommunity[index].selected = false
				} else {
					if(this.community.length >= 5) {
						uni.showToast({
							icon: 'none',
							title: '已达到圈子上限5个了哦~'
						})
					} else {
						this.community.push(parseInt(id))
						this.communityList.id.push(parseInt(id))
						this.communityList.name.push(name)
						this.communityList.index.push(index)
						this.communityName = this.communityList.name.join(' ')
						this.userCommunity[index].selected = true
					}
				}
			},
			// ------------------- # 标签 相关 -------------------- //
			// # 选择标签弹出框
			choicePrimary() {
				this.$refs.primary.show()
				primaryPopup = true
			},
			// 确定前 新增 取消 标签
			ChoicePrime(e) {
				let index = e.currentTarget.dataset.index
				let text = e.currentTarget.dataset.text
				let place = this.choiceList.prime.id.indexOf(index)
				if(place == -1) {
					if(this.choiceList.prime.id.length == 2) {
						let popIndex = this.choiceList.prime.id.splice(0, 1)
						this.choiceList.prime.primary.splice(0, 1)
						this.primaryLabel[popIndex-1].isChoice = false
					}
					this.choiceList.prime.id.push(parseInt(index))
					this.choiceList.prime.primary.push(text)
					this.primaryLabel[index-1].isChoice = true
				} else {
					this.choiceList.prime.id.splice(place, 1)
					this.choiceList.prime.primary.splice(place, 1)
					this.primaryLabel[index-1].isChoice = false
				}
				place = this.choiceList.prime.id.indexOf(index)
				// console.log(place, this.primaryLabel[index-1].isChoice)
				// console.log(this.choiceList)
			},
			// 确认 标签选择
			submitPrime() {
				this.prime = this.choiceList.prime.id
				this.primeName = this.choiceList.prime.primary.join(' ')
				this.write = this.choiceList.write
				this.$refs.primary.hide()
				primaryPopup = false
				console.log(this.prime, this.primeName)
			},
			// ------------------- @ 粉丝 关注 相关 TODO -------------------- //
			// @ 别人弹出框
			atPeople() {
				this.$refs.people.show()
				peoplePopup = true
			},
			// @ 关注 粉丝 的 active
			getActive(e) {
				this.isActive = e.currentTarget.dataset.index
			},
			// @ 关注 粉丝 页面左右滑动
			swiperChange(e) {
				this.isActive = e.detail.current
				// console.log(this.isActive)
			},
			// 选择 @ 的人
			choicePeople(e) {
				// console.log(e)
				let id = e.currentTarget.dataset.id
				let name = '@'+e.currentTarget.dataset.name
				let index = e.currentTarget.dataset.index
				let tag = e.currentTarget.dataset.tag	
				if(this.people.includes(id)) { // 若已选中
					if(tag == 'star') {
						this.userStar[index].selected = !this.userStar[index].selected
						if(this.fansIds.includes(parseInt(id))) {
							this.userFans[this.fansIds.indexOf(parseInt(id))].selected = this.userStar[index].selected
						}
					} else {
						this.userFans[index].selected = !this.userFans[index].selected
						if(this.starIds.includes(parseInt(id))) {
							this.userStar[this.starIds.indexOf(parseInt(id))].selected = this.userFans[index].selected
						}
					}
					let popIndex = this.people.indexOf(id)
					this.people.splice(popIndex, 1)
					this.peopleList.id.splice(popIndex, 1)
					this.peopleList.name.splice(popIndex, 1)
					this.peopleName = this.peopleList.name.join(' ')
				} else {
					if(this.people.length >= 5) {
						uni.showToast({
							icon: 'none',
							title: '人数已达上限5人了哦'
						})
					} else { // 若未选中
						if(tag == 'star') {
							this.userStar[index].selected = !this.userStar[index].selected
							if(this.fansIds.includes(parseInt(id))) {
								this.userFans[this.fansIds.indexOf(parseInt(id))].selected = this.userStar[index].selected
							}
						} else {
							this.userFans[index].selected = !this.userFans[index].selected
							if(this.starIds.includes(parseInt(id))) {
								this.userStar[this.starIds.indexOf(parseInt(id))].selected = this.userFans[index].selected
							}
						}
						this.people.push(parseInt(id))
						this.peopleList.id.push(parseInt(id))
						this.peopleList.name.push(name)
						this.peopleName = this.peopleList.name.join(' ')
					}
				}
				// console.log(this.people, this.peopleList, this.peopleName)
			},
			closePeople() {
				peoplePopup = false
			},
			// ------------------ 历史编辑 ------------------ //
			// 继续历史编辑
			continueHistory() {
				this.compileHistory = true
				uni.showLoading({
					mask: true,
					title: '正在读取历史记录...'
				})
				if(!this.inCommunity) {
					this.prime = this.history.prime
					this.prime.forEach(item => {
						this.primaryLabel[item].isChoice = true
						this.choiceList.prime.id.push(item)
						this.choiceList.prime.primary.push(this.primaryLabel[item].name)
					})
					this.write = this.choiceList.write = this.history.write
					this.primeName = this.choiceList.primeName = this.history.primeName
				}
				this.pictureList = this.history.pictureList
				this.textarea = this.history.textarea
				uni.hideLoading()
			},
			// 清除历史保存的本地图片记录
			clearHistoryPicture: async function() {
				let _self = this
				let pathList = []
				let promises = []
				for(let i = 0; i < _self.history.pictureList.length; i ++) {
					promises[i] = new Promise((resolve, reject) => {
						uni.saveFile({
							tempFilePath: _self.history.pictureList[i],
							success() {
								resolve()
							}
						})
					})
				}
				await Promise.all(promises).then(() => {
					console.log('清除完毕！')
				})
			},
			// 加载更多
			moreStar() {
				let _self = this
				if(!_self.starIsLastPage) {
					_ajax({ // 用户关注列表
						url: '/user/'+_self.userId+'/follows'+'?pageNum='+_self.starNowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then((res) => {
						console.log(res.data)
						if(res.data.status == 0) {
							_self.userStar.push(...res.data.data.list)
							res.data.data.list.forEach(item => {
								_self.starIds.push(item.id)
							})
							console.log(_self.starIds)
							_self.starIsLastPage = res.data.data.isLastPage
							if(_self.starIsLastPage) {
								_self.starStatus = 'noMore'
							} else {
								_self.starNowPage += 1
							}
						}
					})
				}
			},
			moreFans() {
				let _self = this
				if(!_self.fansIsLastPage) {
					_ajax({ // 用户粉丝列表
						url: '/user/'+_self.userId+'/fans'+'?pageNum='+_self.fansNowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then((res) => {
						console.log(res.data)
						if(res.data.status == 0) {
							_self.userFans.push(...res.data.data.list)
							res.data.data.list.forEach(item => {
								_self.fansIds.push(item.id)
							})
							console.log(_self.fansIds)
							_self.fansIsLastPage = res.data.data.isLastPage
							if(_self.fansIsLastPage) {
								_self.fansStatus = 'noMore'
							} else {
								_self.fansNowPage += 1
							}
						}
					})
				}
			},
		},
		computed: {
			// 在取消发布时判断是否输入了内容
			haveContent() {
				if((this.textarea != '') && !/^\s*$/.test(this.textarea)) { // 文本框不为空或全回车
					return true
				}
				if(this.pictureListTem.length) {
					return true
				}
				if(this.prime.length) {
					return true
				}
				if(this.write != '#自建标签' && this.write.length) {
					return true
				}
				if(!this.inCommunity) {
					if(this.community.length) {
						return true
					}
				}
				return false
			},
		},
		onBackPress(options) { // 监听系统的返回键
			if(options.from == 'backbutton') {
				if(communityPopup || peoplePopup || primaryPopup) {
					if(communityPopup) {
						this.$refs.community.hide()
					}
					if(peoplePopup) {
						this.$refs.people.hide()
					}
					if(primaryPopup) {
						this.$refs.primary.hide()
					}
				} else {
					this.back()
				}
				return true
			}
		},
		
	}
</script>

<style lang="less">
.posting_edit {
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	background-color: @g-background;
	.status_bar {
		height: @statusHeight;
		width: 100%;
		background-color: #FFFFFF;
		// position: fixed;
		top: 0rpx;
		z-index: 2;
	}
	// 自定义顶栏
	.nav_bar {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		color: #000000;
		font-size: 14px;
		z-index: 100;
		background-color: white;
		
		.aside {
			width: 150rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			
			text {
				display: inline-block;
				width: 90%;
				height: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.cancel {
				color: @g-gray;
			}
			.issue {
				border-radius: 91rpx;
				background-color: @g-pink;
				color: white;
				margin-right: 20rpx;
			}
			// flex: 1;
		}
		.message {
			flex: 1;
			height: 100%;
		}
		
	}
	// 文本域
	.textarea_box {
		position: relative;
		
		textarea {
			width: 100%;
			box-sizing: border-box;
			height: 350rpx;
			// margin: 5px 10px;
			padding: 5px;
			background-color: white;
			border-radius: 10px;
			border: 5px solid @g-background;
			caret-color: @g-pink;
			
			text {
				color: #548EC2;
			}
		}
		.length {
			position: absolute;
			bottom: 50rpx;
			right: 50rpx;
			color: #9f9f9f;
		}
		.atPeople {
			font-size: 12px;
			line-height: 1rem;
			color: @g-gray;
			position: absolute;
			left: 10px;
			bottom: 10px;
			white-space: pre-wrap;
			width: 550rpx;
			.atPeopleName {
				color: #548EC2;
			}
		}
	}
	// 图片输入框
	.picture_box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		
		view {
			width: 170rpx;
			height: 170rpx;
			margin: 20rpx;
		}
		.picture {
			box-sizing: border-box;
			border: 2px solid @g-gray;
			position: relative;
			
			image {
				width: 100%;
				height: 100%;
				// z-index: 100;
			}
			.delete {
				position: absolute;
				padding: 2px;
				top: 0;
				right: 0;
				background-color: #0000005c;
				// z-index: 120;
			}
		}
		.add_picture {
			font-size: 5rem;
			// background-color: white;
		}
		.add_picture::before {
			position: relative;
			display: inline-block;
			top: -15rpx;
			left: -15rpx;
		}
	}
	// 标签 圈子
	.primary_box {
		
		.primary {
			width: 600rpx;
			line-height: 1.5rem;
			padding: 0 20rpx;
			border: 1px solid #cfcfcf;
			border-radius: 5px;
			margin: 10px 5px;
			
			text {
				font-size: 15px;
				color: #4f4f4f;
				
				text {
					font-size: 14px;
					color: @g-gray;
				}
			}
			.content {
				font-size: 12px;
				color: #548EC2;
			}
		}
		
	}
	// 底栏
	.bottom_box {
		background-color: white;
		position: fixed;
		width: 100%;
		bottom: 0;
		box-shadow: 0 0 5px 0 #cfcfcf;
		
		.inxupt {
			display: inline-block;
			padding: 10px;
			font-size: 1.3rem;
			color: #D2D2D2;
		}
		
	}

	// 标签弹窗
	.primary_popup {
		line-height: 1.3rem;
		position: relative;
		height: 100%;
		padding-bottom: 300rpx;
		
		.title {
			padding-left: 7px;
			font-size: 18px;
			margin: 5px 0;
			text {
				font-size: 14px;
				color: @g-gray;
			}
		}
		.prime_box {
			margin: 10px 0;
			.prime {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				
				.label {
					padding: 0 10px;
					display: inline-block;
					border: 1px solid #9f9f9f;
					border-radius: 20px;
					color: @g-gray;
					font-size: 14px;
					margin: 3px 7px;
				}
				.selected {
					background-color: @g-pink;
					color: white;
					border-color: @g-pink;
				}
			}
		}
		.write_box {
			margin: 20px 0;
			
			.input_box {
				width: 600rpx;
				font-size: 14px;
				line-height: 1.5rem;
				margin-left: 5px;
				
				input {
					display: inline-block;
					width: 100%;
					// height: 100%;
					padding: 5px 5px;
					border-radius: 5px;
					font-size: 14px;
					background-color: #F2F2F2;
				}
			}
		}
		.submit_box {
			position: absolute;
			width: 100%;
			height: 90px;
			display: flex;
			justify-content: center;
			align-items: center;
			bottom: 80rpx;
			
			.button {
				display: inline-block;
				width: 225px;
				height: 44px;
				border-radius: 5px;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				background-color: @g-pink;
			}
		}
	}
	
	scroll-view {
		height: 100%;
	}
	// 圈子弹窗
	.community_popup {
		height: 100%!important;
		display: flex;
		flex-direction: column;
		
		.input_box {
			margin-top: 20rpx;
			width: 600rpx;
			line-height: 2rem;
			color: @g-gray;
			
			.text {
				display: inline-block;
				margin-left: 20rpx;
				background-color: #F2F2F2;
				border-radius: 5px;
				padding-left: 5px;
				width: 85%;
				line-height: 1.5rem;
			}
		}
		.scroll_box {
			flex: 1;
		}
		// .community_box {
		// 	// flex: 1;
		// 	height: 100%;
			.item {
				margin: 5px;
				padding: 5px;
				padding-left: 10px;
				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border: 3px solid transparent;
				
				.photo {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
				.name {
					color: @g-gray;
					display: inline-block;
					margin-left: 10px;
				}
			}
			.active {
				border-left-color: @g-pink;
			}
		// }
	}
	
	// @ 别人弹出框
	.people_popup {
		height: 100%!important;
		display: flex;
		flex-direction: column;
		
		.input_box {
			margin-top: 20rpx;
			width: 600rpx;
			line-height: 2rem;
			color: @g-gray;
			
			.text {
				display: inline-block;
				margin-left: 20rpx;
				background-color: #F2F2F2;
				border-radius: 5px;
				padding: 3px 5px;
				width: 100%;
			}
		}
		.title {
			display: flex;
			line-height: 1.3rem;
			padding: 0.5rem 2px 0;
			
			.title_item {
				width: 180rpx;
				color: @g-gray;
				display: flex;
				font-size: 1rem;
				justify-content: center;
				align-items: flex-end;
				font-weight: bold;
				padding-bottom: 2px;
				border-bottom: 2px solid transparent;
			}
			.active {
				border-bottom: 2px solid @g-pink;
				.text {
					color: #3f3f3f;
				}
				.number {
					color: @g-pink;
				}
			}	
		}
		.swiper_box {
			flex: 1;
		}
		swiper {
			swiper-item {
				height: 100%;
				.item {
					margin: 5px;
					padding: 5px;
					padding-left: 10px;
					height: 100rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border: 3px solid transparent;
					
					.photo {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
					.name {
						color: @g-gray;
						display: inline-block;
						margin-left: 10px;
					}
				}
				.active {
					border-left-color: @g-pink;
				}
			}
		}		
	}
}
</style>
